<template>
	<div class="edit-password">
		<ul>
			<li>
				<input :type="pwdStatus?'text':'password'" :value="forms.origin" v-on:input="formsChange('origin')" ref="origin" placeholder="当前密码" />
				<span :class="[clears['origin']?'active':'','clear']" @click.stop="clear('origin')"></span>
			</li>
		</ul>
		<ul>
			<li>
				<input :type="pwdStatus?'text':'password'" :value="forms.first" v-on:input="formsChange('first')" ref="first" placeholder="新密码 (8-16个字符)" />
				<span :class="[clears['first']?'active':'','clear']" @click.stop="clear('first')"></span>
			</li>
			<li>
				<input :type="pwdStatus?'text':'password'" :value="forms.second" v-on:input="formsChange('second')" ref="second" placeholder="确认新密码" />
				<span :class="[clears['second']?'active':'','clear']" @click.stop="clear('second')"></span>
			</li>
		</ul>
		<div class="ctl-cont">
			<p class="passwor-ctl">
				<mycheckbox :getStatus="getStatus" ></mycheckbox>
				显示密码
			</p>
			<button @click="submit" :class="submitStatus?'active':''">保存</button>
		</div>
    </div>
</template>

<script>
	import http from '../services/http';
	import mycheckbox from "../components/mycheckbox.vue";
	
	export default {
		name: 'edit-password',
    	data:function(){
    		return{
    			pwdStatus:false,
    			validateBan:false,
    			submitStatus:false,
    			forms:{},
    			clears:{}
    		}
    	},
    	props:["toast"],
    	methods:{
    		getStatus(status){
    			this.pwdStatus = status;
    		},
    		checkBtn(){//检查注册表是否全部输入
    			let self = this;
    			if(this.timeout)clearTimeout(this.timeout);
    			this.timeout = setTimeout(function(){
					let status = true;
					const config = ['origin','first','second'];
					config.forEach(item => {
						if(!self.forms[item] || self.forms[item].length<=0){
							status = false;
						}
					});
					self.submitStatus = status;
				},300);
    		},
    		formsChange(key){
    			const cur = this.$refs[key].value;
    			this.forms[key] = cur;
    			this.clears[key] = cur.length>0 ? true : false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		clear(key){
    			this.forms[key] = '';
    			this.clears[key] = false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		submit(){
    			const {forms, toast, $router} = this;
    			if(forms.first!=forms.second){
    				return toast("两次密码输入不一致");
    			}
				http.post('/upm/api/v1/protected/user/change_password',{
				    "confirmNewPassword": forms.second,
					"newPassword": forms.first,
					"password": forms.origin
				},function(data){
					if(data.success){
						toast(data.message||'修改密码成功');
						$router.push({ path: '/login' });
					}else{
						toast(data.message||'修改密码失败');
					}
				});
    		}
    	},
        components: {
            mycheckbox
        }
    };
    
    
    
</script>
<style lang="css">

.edit-password{ 
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	font-size: 1rem;
	border-top: 1px #f5f5f5;
}
.edit-password ul{
	background: #ffffff;
	margin-top: 10px;
	padding: 0 20px;
	width: 100%;
	float: left;
}

.edit-password li{
	position: relative;
	height: 51px;
	padding-bottom: 15px;
	padding-top: 15px;
}
.edit-password li:nth-of-type(1){
	border-bottom: solid 1px #e6e6e6;
}
.edit-password li:last-child{
	border-bottom: none;
}
.edit-password li.last{
	border-bottom: none;
}
.edit-password li .icon{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 30px;
}
.edit-password li input{
	width: 100%;
	border: none;
	height: 100%;
	background: #ffffff;
	line-height: 20px;
	font-size: 1rem;
	padding: 0 26px 0 0;
}
.edit-password li .clear{
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 26px;
	cursor: pointer;
	background: transparent url(../assets/img/icon/input-clear.png) no-repeat center / auto 11px;
}
.edit-password li .clear.active{
	display: block;
}
.edit-password li.validate{
	padding-right: 95px;
}
.edit-password li .btn{
	position: absolute;
	right: 0;
	top: 7px;
	border-radius: 4px;
	padding: 0 8px;
	color: #4cb0b6;
	height: 28px;
	line-height: 28px;
	cursor: pointer;
	border: solid 1px #4cb0b6;
}
.edit-password li .btn.ban{
	color: #cccccc;
	border: solid 1px #cccccc;
}
.edit-password button{
	font-size: 1rem;
	text-align: center;
	line-height: 50px;
	height: 50px;
	width: 100%;
	background: #2dbe60;
	border-radius: 4px;
	color: rgba(225,225,225,0.7);
	margin-top: 15px;
}
.edit-password button.active{
	color: #ffffff;
}

.edit-password .ctl-cont{
	margin-top: 10px;
	width: 100%;
	float: left;
}
.edit-password .ctl-cont p{
	padding: 10px 20px;
	color: #666667;
}
.edit-password .ctl-cont button{
	background: #ffffff;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 100%;
	color: rgba(45,190,96,0.5);
	font-size: 1rem;
}
.edit-password .ctl-cont button.active{
	color: #2dbe60;
	color: rgba(45,190,96,1);
}







</style>
